<template>
  <div class="did-h">
    <div class="black black-h">
      <div><strong style="font-size: 1.2em;">审核列表</strong></div>
      <div>审批管理员提交申请</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="10">
          <el-form label-position="right" label-width="180px" :model="form">
          </el-form>
        </el-col>
      </el-row>
      <el-table :data="tableData"  class="full-width-table">
        <el-table-column prop="number" label="士兵号" width="220" align="center"></el-table-column>
        <el-table-column prop="name" label="用户名" width="220" align="center"></el-table-column>
        <el-table-column prop="userType" label="用户类型" width="220" align="center">
          <template slot-scope="scope">
            {{ getUserTypeLabel(scope.row.userType) }}
          </template>
        </el-table-column>
          <el-table-column prop="documents" label="证件" width="220" align="center">
            <template slot-scope="scope">
              <el-button @click="handleDocumentClick(scope.row.documents)" type="text" align="center">下载证件</el-button>
            </template>
          </el-table-column>
        
        <el-table-column prop="kycStatus" label="帐号状态" width="220" align="center">
          <template slot-scope="scope">
            {{ getUserStatusLabel(scope.row.kycStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="申请时间"  align="center"></el-table-column>
        <el-table-column fixed="right" label="" width="220">
          <template slot-scope="scope">
            <el-button @click="handlePermissionOperation(scope.row)" type="text" size="small" align="center">审核操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"
      @current-change="handleCurrentChange"
      style="width:50%;margin:auto;margin-top:50px !important;display: flex;align-items: center;justify-content: center"></el-pagination>



    <!-- 权限操作弹窗 -->
    <el-dialog title="审核操作" :visible.sync="dialogVisible" width="30%">
      <div class="dialog-content">
        <p>确定要执行以下操作吗？</p>
        <el-button @click="handleAgree" type="primary">同意</el-button>
        <el-button @click="handleReject" type="danger">拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 100,
      form: {},
      data: '',
      tableData: [{}],
      editDialogVisible: false,
      editForm: {},
      dialogVisible: false, // 弹窗可见状态
      selectedRow: null, // 用于存储选中的行数据
    };
  },
  mounted() {
    // 发起异步请求获取数据’
    this.showAuditData(1, 1, 1);
  },
  methods: {
    async Approved() {
      this.data = '';
      let res = await this.$http.post(this.$api.userIdentity.Approved, this.form);
      if (res.code === 200) {
        this.data = res;
      }
    },
    handleAgree() {
      this.form = Object.assign({}, this.selectedRow);
      this.Approved();
      this.dialogVisible = false;
    },
    handleReject() {
      this.form = Object.assign({}, this.selectedRow);
      this.AuditFailed();
      this.dialogVisible = false;
    },
    async handleDocumentClick(documents) {
      try {
        // 发起异步请求获取证件文件的二进制数据
        const response = await this.$http.get(documents, { responseType: 'blob' });

        // 创建一个 Blob 对象，表示证件文件的二进制数据
        const blob = new Blob([response.data], { type: 'application/octet-stream' });

        // 生成临时下载链接
        const url = URL.createObjectURL(blob);

        // 创建一个隐藏的<a>元素来模拟点击下载操作
        const link = document.createElement('a');
        link.href = url;
        link.download = 'document.pdf'; // 设置默认下载文件名
        link.style.display = 'none';

        // 将<a>元素添加到文档中并模拟点击
        document.body.appendChild(link);
        link.click();

        // 下载完成后，撤销临时下载链接
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载证件文件失败：', error);
        // 在下载失败时，您可以添加适当的错误处理逻辑
      }
      a

    },
    async AuditFailed() {
      this.data = '';
      let res = await this.$http.post(this.$api.userIdentity.AuditFailed, this.form);
      if (res.code === 200) {
        this.data = res;
      }
    },

    async showAuditData(number, name, page) {
      let formData = new FormData();
      formData.append('number', number);
      formData.append('name', name);
      formData.append('page', page);
      formData.append('pageSize', 10);
      try {
        let res = await this.$http.post(this.$api.userIdentity.showAuditData, formData);
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.tableData = res.data;
          console.log(res.data);
        }
      } catch (error) {
        console.error(error);
      }
    },
    handleEdit(row) {
      this.editForm = Object.assign({}, row);
      this.editDialogVisible = true;
    },
    handleCurrentChange(currentPage) {
    this.showAuditData(1, 1, currentPage); // 传递当前页码
  },
    handlePermissionOperation(row) {
      this.selectedRow = Object.assign({}, row);
      this.dialogVisible = true;
    },
    getUserTypeLabel(userType) {
      return userType === 1 ? "管理员" : "用户";
    },
    getUserStatusLabel(kycStatus) {
      return kycStatus === 1 ? "未审核" : kycStatus === 2 ? "同意" : kycStatus === 3 ? "拒绝" : "未知状态";
    },
  },
};
</script>

<style lang="less" scoped>
.black-h {
  height: 80%;
}

.full-width-table {
  width: 90% !important;
  margin: 0 auto;

}
</style>
